<template>
	<view class="content">
		<!--  #ifdef APP-PLUS -->
		<!-- <view class="top-bar"></view> -->
		<!--  #endif -->
		<view class="custom">
			<view class="title">
				积分商城
				<view class="more" @tap="$Router.push('/pages/integral/details')">明细</view>
			</view>
		</view>
		<view class="sign">
			<image class="sign-bj" src="@/static/images/integral/background.png"></image>
			<view class="sign-box">
				<view class="user">
					<image
						v-if="userInfo.headUrl"
						class="user-avatar"
						:src="userInfo.headUrl"
					></image>
					<image
						class="user-avatar"
						v-else
						src="@/static/images/member/default-avatar.png"
					/>
					<view class="user-info">
						<view class="user-info__value">我的积分</view>
						<view class="user-info__num">{{ userInfo.jfScore || '0' }}</view>
					</view>
				</view>
				<view class="sign-day">
					<view class="sign-day__title">
						<view class="point"></view>
						<view>如7天签到中断，奖励会减少哦～</view>
						<view class="sign-day__switch">
							<switch
								:checked="isSignIn"
								color="#34C759"
								@change="switchChange"
							></switch>
							签到提醒
						</view>
					</view>
					<view class="sign-day__list">
						<block v-for="(item, index) in dayList" :key="index">
							<view class="sign-day__list-li">
								<view class="li-img">
									<image
										v-if="item.hasSign == 1"
										src="@/static/images/integral/succ.png"
									></image>
									<image v-else src="@/static/images/integral/gray.png"></image>
									<view class="num" :class="item.hasSign == 1 ? 'active' : ''"
										>+{{ item.score + item.extraScore }}</view
									>
								</view>
								<view class="li-title">
									<view v-if="item.hasSign == 1">已签</view>
									<view v-else>{{ item.day }}天</view>
								</view>
							</view>
						</block>
					</view>
					<view
						class="sign-day__btn"
						:class="todayHasSign == 1 ? '' : 'active'"
						@tap="goSign"
					>
						{{ todayHasSign == 1 ? '今日已签' : '立即签到' }}
					</view>
				</view>
			</view>
		</view>

		<view class="exchange">
			<view class="exchange-title">
				<view class="exchange-title__left">
					<view class="line"></view>
					<view class="title">
						<view>兑返利红包</view>
						<view class="tips">每天限兑换1个</view>
					</view>
				</view>
				<view class="exchange-title__more" @tap="$Router.push('/pages/integral/money')">
					积分红包<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
			<view class="exchange-box">
				<view class="exchange-box-for" v-if="monryList.length > 0">
					<block v-for="(item, index) in monryList" :key="index">
						<view class="exchange-box__li">
							<view class="exchange-box__li-img">
								<image src="@/static/images/integral/honhbao.png"></image>
								<view class="money">￥{{ item.money }}</view>
							</view>
							<view class="exchange-box__li-btn" @tap="exChange(item)"
								>{{ item.score }}积分兑换</view
							>
						</view>
					</block>
					<!-- <LoadMore :finished="isReachBottom"></LoadMore> -->
				</view>
				<LoadMore v-else :empty="true" emptyText="暂无返利红包"></LoadMore>
			</view>
		</view>
		<prop-box
			ref="PropBox"
			width="566"
			:height="propboxObj.height"
			:isTitle="false"
			:isBtn="false"
		>
			<template>
				<view class="prop-sign">
					<image
						class="prop-sign__img"
						src="@/static/images/integral/signSucc.png"
						v-if="propboxObj.icon === 'signSucc'"
					></image>
					<image
						class="prop-sign__img"
						src="@/static/images/integral/icon-money2.png"
						v-if="propboxObj.icon === 'icon-money2'"
					></image>
					<view class="prop-sign__title" v-if="propboxObj.title">{{
						propboxObj.title
					}}</view>
					<view class="prop-sign__value">{{ propboxObj.value }}</view>
					<view class="prop-sign__btn" @tap="closePropBtn">{{
						propboxObj.btnValue
					}}</view>
					<view class="prop-sign__tips" v-if="propboxObj.isTisps" @tap="closeProp"
						>我知道了</view
					>
				</view>
			</template>
		</prop-box>
		<view class="prop-value__hb">
			<prop-box
				ref="redBox"
				width="566"
				height="846"
				:isTitle="false"
				:isBtn="false"
				:isHeader="false"
			>
				<view class="prop-hb">
					<view class="prop-hb__bj">
						<image
							class="prop-hb__bj-img"
							src="@/static/images/integral/exchange.png"
						></image>
						<text class="iconfont icon-guanbi " @tap="redBoxClose"></text>
						<view class="prop-hb__bj-money1">￥{{ redBoxOBj.money | unitMoney }}</view>
						<view class="prop-hb__bj-box">
							<view>下单后额外再返</view>
							<view class="money2">￥{{ redBoxOBj.money | unitMoney }}</view>
						</view>
					</view>
					<view class="prop-hb__cont">
						<view class="prop-hb__cont-header">
							<view class="line"></view>
							<view>补贴红包说明</view>
							<view class="line"></view>
						</view>
						<view class="prop-hb__cont-value">
							<view class="t">使用条件</view>
							<view class="v"
								>1、单笔订单补贴<text>{{ redBoxOBj.conditions }}元以上</text></view
							>
							<view class="v">2、入帐后即可提现</view>
							<view class="v">3、0元商品和超高返不可使用补贴红包</view>
							<view class="t">使用有效期</view>
							<view class="v"
								>兑换后{{ redBoxOBj.expire }}天内有效，可在[积分红包]查看</view
							>
						</view>
						<view class="prop-hb__btn" @tap="hbExchange">立即兑换</view>
					</view>
				</view>
			</prop-box>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import PropBox from '@/components/PropBox';
import LoadMore from '@/components/LoadMore';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			dayList: [],
			taskLitsL: [],
			todayHasSign: 0,
			addScore: 0,
			propboxObj: {
				icon: '',
				height: '',
				title: '',
				value: '',
				btnValue: '',
				isTisps: false
			},
			params: {
				page: 1,
				size: 10
			},
			monryList: [],
			pagination: {},
			isReachBottom: false,
			redBoxOBj: {
				money: 0,
				expire: 0,
				conditions: 0
			},
			loginBtnLock: false,
			isSignIn: false
		};
	},
	components: {
		PropBox,
		LoadMore
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onLoad() {
	},
	watch: {
		'userInfo.signInRemind': {
			immediate: true,
			handler(val) {
				this.isSignIn = val == 1 ? true : false;
			}
		}
	},
	onShow() {
		console.log(this.userInfo.signInRemind);

		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});

		if (!uni.getStorageSync('token')) {
			if (!this.loginBtnLock) {
				this.loginBtnLock = true;
				uni.navigateTo({
					url: '/pages/common/login?intention=index',
					animationType: 'slide-in-bottom',
					animationDuration: 300
				});
			} else {
				this.loginBtnLock = false;
				this.$Router.pushTab('/pages/index/index');
			}

			return false;
		}
		// 获取用户信息
		// #ifdef H5
		this.$store.dispatch('getUserInfo', { versionCode: 140 });
		// #endif
		// #ifdef APP-PLUS
		plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
			let params = { ...wgtinfo };
			this.$store.dispatch('getUserInfo', params);
		});
		// #endif
		this.refresh();
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		refresh() {
			this.getSignList();
			this.getMoney({ ...this.params });
			uni.stopPullDownRefresh();
		},
		getSignList() {
			this.$service.integral.score
				.signList()
				.then(res => {
					this.dayList = res.list;
					this.todayHasSign = res.todayHasSign;
					// 获取用户信息
					// #ifdef H5
					this.$store.dispatch('getUserInfo', { versionCode: 140 });
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
						let params = { ...wgtinfo };
						this.$store.dispatch('getUserInfo', params);
					});
					// #endif
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},

		getMoney(params) {
			this.$service.integral.money
				.page(params)
				.then(res => {
					this.pagination = res.pagination;
					if (res.pagination.page > 1) {
						this.monryList = this.monryList.concat(res.list);
					} else {
						this.monryList = res.list;
					}
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},

		goSign() {
			if (this.todayHasSign == 0) {
				this.$service.integral.score
					.sign()
					.then(res => {
						let addScore = Number(res.score) + Number(res.extraScore);
						this.propboxObj.height = '500';
						this.propboxObj.icon = 'signSucc';
						this.propboxObj.title = '签到成功';
						this.propboxObj.value = `今日签到收益+${addScore}积分`;
						this.propboxObj.btnValue = '我知道了';
						this.$refs['PropBox'].open();
						this.refresh();
					})
					.catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
			} else {
				uni.showToast({
					title: '已签到',
					icon: 'none'
				});
			}
		},
		closeProp() {
			this.$refs['PropBox'].close();
		},
		// 签到提醒
		switchChange(e) {
			let signInRemind = 0;
			if (e.detail.value) {
				signInRemind = 1;
			} else {
				signInRemind = 0;
			}
			this.$service.common.userHf
				.update({
					signInRemind
				})
				.then(async res => {
					// 获取用户信息
					// #ifdef H5
					this.$store.dispatch('getUserInfo', { versionCode: 140 });
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
						let params = { ...wgtinfo };
						this.$store.dispatch('getUserInfo', params);
					});
					// #endif
				})
				.catch(async err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
					// 获取用户信息
					// #ifdef H5
					this.$store.dispatch('getUserInfo', { versionCode: 140 });
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
						let params = { ...wgtinfo };
						this.$store.dispatch('getUserInfo', params);
					});
					// #endif
				});
		},
		closePropBtn() {
			if (this.propboxObj.icon == 'icon-money2') {
				this.$Router.push('/pages/integral/task');
			} else {
				this.$refs['PropBox'].close();
			}
		},
		redBoxClose() {
			this.$refs['redBox'].close();
		},
		exChange(e) {
			if (Number(this.userInfo.jfScore) > Number(e.score)) {
				this.$refs['redBox'].open();
				this.redBoxOBj = Object.assign(e);
			} else {
				this.propboxObj.height = '526';
				this.propboxObj.icon = 'icon-money2';
				this.propboxObj.title = '';
				this.propboxObj.value = `非常抱歉，积分不足啦做任务可以赚积分哦`;
				this.propboxObj.btnValue = '去赚积分';
				this.propboxObj.isTisps = true;
				this.$refs['PropBox'].open();
			}
		},
		hbExchange() {
			this.$service.integral.money
				.exchange({
					id: this.redBoxOBj.id
				})
				.then(res => {
					uni.showToast({
						title: '兑换成功，可在【我的红包】查看',
						icon: 'none'
					});
					this.$refs['PropBox'].close();
					setTimeout(() => {
						this.$Router.push('/pages/integral/money');
					}, 2000);
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		}
	},
	onPullDownRefresh() {
		this.refresh();
	}
	// onReachBottom() {
	// 	if (
	// 		this.pagination.page * (this.pagination.pageSize || this.pagination.size) >=
	// 		this.pagination.total
	// 	) {
	// 		this.isReachBottom = true;
	// 	} else {
	// 		this.isReachBottom = false;
	// 		this.getMoney({
	// 			...this.params,
	// 			page: this.pagination.page + 1
	// 		});
	// 	}
	// }
};
</script>
<style lang="scss" scoped>
.content {
	background: #f6f7fa;
	/deep/.uni-sample-toast {
		.uni-simple-toast__text {
			background: rgba(247, 1, 20, 0.67);
		}
	}
	.top-bar {
		width: 100%;
		height: 60rpx;
		background: #ff004c;
	}
	.custom {
		width: 100%;
		/*  #ifdef  APP-PLUS */
		height: 168rpx;
		/*  #endif  */
		/*  #ifdef  H5 */
		height: 108rpx;
		/*  #endif  */
		background: #ff004c;
		position: sticky;
		top: 0;
		z-index: 40;
		overflow: hidden;
		.title {
			font-size: 32rpx;
			color: #ffffff;
			text-align: center;
			/*  #ifdef  APP-PLUS */
			margin-top: 80rpx;
			/*  #endif  */
			/*  #ifdef  H5 */
			margin-top: 30rpx;
			/*  #endif  */
			position: relative;
			.more {
				color: #ffffff;
				font-size: 28rpx;
				position: absolute;
				right: 28rpx;
				top: 10rpx;
			}
		}
	}
	.sign {
		width: 100%;
		height: 548rpx;
		position: relative;
		overflow: hidden;
		.sign-bj {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}
		.sign-box {
			position: relative;
			z-index: 20;
			.user {
				@include flexBox(null, center);
				margin-top: 24rpx;
				margin-left: 40rpx;
				.user-avatar {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
				.user-info {
					color: #ffffff;
					margin-left: 30rpx;
					&__value {
						font-size: 28rpx;
					}
					&__num {
						font-size: 56rpx;
					}
				}
			}
			.sign-day {
				width: 714rpx;
				margin: auto;
				margin-top: 50rpx;
				border-radius: 18rpx;
				background: #ffffff;
				padding: 26rpx 0rpx 34rpx 0rpx;
				&__title {
					color: #717076;
					font-size: 28rpx;
					@include flexBox(center, center);
					.point {
						width: 14rpx;
						height: 14rpx;
						border-radius: 50%;
						background: #ff004c;
						margin-right: 18rpx;
					}
				}
				&__switch {
					switch {
						transform: scale(0.6, 0.6);
					}
				}
				&__list {
					margin-top: 32rpx;
					padding: 0 32rpx;
					@include flexBox(space-between, center);

					&-li {
						.li-img {
							width: 62rpx;
							height: 62rpx;
							position: relative;
							image {
								position: absolute;
								top: 0;
								left: 0;
								width: 62rpx;
								height: 62rpx;
							}
							.num {
								width: 60rpx;
								height: 60rpx;
								font-size: 24rpx;
								color: #bebebe;
								position: absolute;
								text-align: center;
								line-height: 60rpx;
								&.active {
									color: #dba800;
								}
							}
						}
						.li-title {
							font-size: 24rpx;
							color: #a8a8a8;
							text-align: center;
							margin-top: 12rpx;
						}
					}
				}
				&__btn {
					width: 230rpx;
					height: 68rpx;
					margin: auto;
					border-radius: 34rpx;
					background: #8a8a8a;
					text-align: center;
					line-height: 68rpx;
					color: #ffffff;
					font-size: 28rpx;
					margin-top: 34rpx;
					&.active {
						background: #ff004c;
					}
				}
			}
		}
	}

	.exchange {
		margin: 50rpx 0;

		.exchange-title {
			padding: 0 34rpx;
			@include flexBox(space-between, self-end);
			&__left {
				display: flex;
				.line {
					width: 10rpx;
					height: 34rpx;
					background: #f70114;
					margin-top: 8rpx;
				}
				.title {
					margin-left: 10rpx;
					color: #383041;
					font-size: 32rpx;
					.tips {
						color: #86828c;
						font-size: 24rpx;
					}
				}
			}
			&__more {
				color: #86828c;
				font-size: 28rpx;
			}
		}
		.exchange-box {
			width: 714rpx;
			margin: auto;
			margin-top: 30rpx;
			background: #ffffff;
			border-radius: 16rpx;
			&-for {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
			&__li {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 353rpx;
				padding: 26rpx 0;

				&-img {
					width: 204rpx;
					height: 218rpx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 10;
					}
					.money {
						position: relative;
						z-index: 20;
						text-align: center;
						color: #ff0043;
						font-size: 40rpx;
						font-weight: bold;
						margin-top: 50rpx;
					}
				}
				&-btn {
					width: 240rpx;
					height: 58rpx;
					margin: auto;
					margin-top: 26rpx;
					border-radius: 30rpx;
					border: 2rpx solid #f70114;
					text-align: center;
					line-height: 58rpx;
					color: #f70114;
					font-size: 26rpx;
				}
			}
		}
	}
	.prop-sign {
		@include flexBox(space-around, center, column);
		&__img {
			width: 189rpx;
			height: 154rpx;
		}
		&__title {
			margin-top: 30rpx;
			color: #221d2c;
			font-size: 32rpx;
		}
		&__value {
			margin-top: 12rpx;
			color: #717076;
			font-size: 28rpx;
			width: 280rpx;
			text-align: center;
		}
		&__btn {
			width: 230rpx;
			height: 68rpx;
			background: rgba(255, 0, 76, 1);
			border-radius: 34rpx;
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
			line-height: 68rpx;
			margin-top: 42rpx;
		}
		&__tips {
			color: #717076;
			font-size: 28rpx;
			margin-top: 26rpx;
		}
	}
	.prop-value__hb {
		/deep/.prop {
			border-radius: 18rpx;
			overflow: hidden;
			background: yellow;
		}
	}
	.prop-hb {
		&__bj {
			width: 100%;
			height: 318rpx;
			position: relative;
			display: flex;
			&-img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}
			&-money1 {
				color: #ff0043;
				font-size: 26rpx;
				position: absolute;
				top: 170rpx;
				left: 107rpx;
				z-index: 20;
			}
			.iconfont {
				position: absolute;
				z-index: 20;
				top: 28rpx;
				right: 32rpx;
				color: #ffffff;
			}
			&-box {
				position: absolute;
				top: 170rpx;
				left: 210rpx;
				z-index: 20;
				color: #221d2c;
				font-size: 28rpx;
				.money2 {
					color: #ff0043;
					font-size: 28rpx;
				}
			}
		}
		&__cont {
			width: 566rpx;
			height: 548rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: -20rpx;
			position: relative;
			z-index: 20;
			overflow: hidden;
			&-header {
				@include flexBox(center, center);
				color: #ff024b;
				font-size: 26rpx;
				margin-top: 28rpx;
				.line {
					width: 94rpx;
					height: 4rpx;
					background: #ff5284;
					margin: 0 18rpx;
				}
			}
			&-value {
				padding: 0 38rpx;
				margin-top: 10rpx;
				color: #717076;
				font-size: 24rpx;
				.t {
					color: #221d2c;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
				.v {
					margin-top: 12rpx;
				}
				text {
					color: #f70114;
				}
			}
		}
		&__btn {
			width: 282rpx;
			height: 68rpx;
			margin: auto;
			margin-top: 50rpx;
			background: #ff004c;
			border-radius: 34rpx;
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
			line-height: 68rpx;
		}
	}
}
</style>
